import { Tabs } from 'antd'
import config, { DEFAULT_PRODUCT_NAME } from '@/config'
import { ReactComponent as SettingIcon } from '@/desktop/assets/setting.svg'
import { SiderItem } from '@/desktop/views/app'
import { panelSubject, CoverPanel, siderOpenStyle } from '@/desktop/views/app/cover-panel'
import { useStreams } from '@/lib/utils'
import services from '@/services'

import About from './about'
import { Accounts } from './accounts'
import { ChatSidebars } from './chat-sidebars'
import { CorpWhiteList } from './corp-whitelist'
import { Logging } from './logging'
import { Notify } from './notify'
import { NotifyURL } from './notify-url'
import { QywxConnect } from './qywx-connect-simple'

export function SettingsToggle({ collapsed }: { collapsed: boolean }) {
  const [openingPanel] = useStreams(panelSubject)
  const opening = openingPanel === Settings

  return <SiderItem
    css={opening && siderOpenStyle}
    collapsed={collapsed}
    icon={<SettingIcon />}
    title="系统管理"
    tooltip="打开系统管理面板"
    onClick={() => panelSubject.next(opening ? null : Settings)}
  />
}

function Settings() {
  const [isAdmin] = useStreams(services.auth.isAdmin$)

  const tabs = useMemo(
    () =>
      [
        { admin: true, label: '账号管理', key: 'accounts', children: <Accounts /> },
        { admin: true, label: 'API 回调', key: 'openapi', children: <NotifyURL /> },
        //{ admin: true, label: '企微后台打通', key: 'qywx-connect', children: <QywxConnect /> },
        { admin: true, label: '聊天侧边栏', key: 'sidebars', children: <ChatSidebars /> },
        { admin: true, label: '登录白名单', key: 'whitelist', children: <CorpWhiteList /> },
        { label: '通知', key: 'notify', children: <Notify /> },
        { label: '日志', key: 'logs', children: <Logging /> },
        // 定制了产品信息的情况下，不显示“关于”
        //config.PRODUCT_NAME === DEFAULT_PRODUCT_NAME
        //  ? { label: '关于', key: 'about', children: <About /> }
        //  : null,
      ].filter(tab => tab && (isAdmin === true || tab.admin !== true)),
    [isAdmin],
  )

  return <CoverPanel title="系统管理">
    <div css={s.wrap}>
      <Tabs css={s.tabs} tabPosition="left" items={tabs} destroyInactiveTabPane />
    </div>
  </CoverPanel>
}

export function PanelSection(props: {
  title: string
  children: React.ReactNode
  className?: string
}) {
  const { title, children, className } = props
  return <section className={className}>
    <h5>{title}</h5>
    <main>{children}</main>
  </section>
}

const s = {
  wrap: css`
    flex: 1;
    overflow: hidden;
  `,
  tabs: css`
    max-height: 100%;
    min-height: 350px;
    padding-top: 30px;

    & > .ant-tabs-nav .ant-tabs-tab {
      padding-left: 0;
      width: 180px;
    }

    & > .ant-tabs-content-holder {
      overflow-y: auto;
    }

    // 各 tab 通用样式
    & > .ant-tabs-content-holder > .ant-tabs-content > .ant-tabs-tabpane {
      padding-left: 48px;
      padding-bottom: 20px;

      // 小节标题
      h5 {
        font-size: 13px;
        margin-bottom: 20px;
      }

      // 右对齐表单 label，需自行设置宽度
      .settings-label {
        color: #777;
        display: inline-block;
        font-size: 13px;
        margin-right: 0.5em;
        text-align: right;
      }
    }
  `,
}
